<template>
  <div class="mall-category-bar">
    <span 
      class="mall-category-bar__item" 
      :class="{ 'mall-category-bar__item--active': selectedCategory === cat }"
      v-for="cat in displayCategories" 
      :key="cat"
      @click="handleCategoryClick(cat)"
    >
      {{ cat }}
    </span>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const props = defineProps<{
  categories: string[]
}>()

const emit = defineEmits<{
  change: [category: string]
}>()

const selectedCategory = ref('全部')

// 计算显示的分类，包含"全部"选项
const displayCategories = computed(() => {
  return ['全部', ...props.categories]
})

function handleCategoryClick(category: string) {
  selectedCategory.value = category
  // 如果选择"全部"，传递空字符串
  const categoryToEmit = category === '全部' ? '' : category
  emit('change', categoryToEmit)
}
</script>

<style scoped>
.mall-category-bar {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  font-size: 15px;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  flex-wrap: wrap;
}
.mall-category-bar__item {
  color: #666;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 20px;
  transition: all 0.2s;
  border: 1px solid #e0e0e0;
  background: #f8f9fa;
}
.mall-category-bar__item:hover {
  background: #e3f2fd;
  color: #0078d7;
  border-color: #0078d7;
}
.mall-category-bar__item--active {
  background: #0078d7;
  color: #fff;
  border-color: #0078d7;
}
</style> 